<template>
  <div class="article">
    <div class="wrap2">
      <div class="articlecate">
        <h1>全部文章</h1>
      </div>
      <div class="articleList">
        <div class="list1"  v-for="item in teacherList" :key="item.id">
          <div @click="toarticleTodetail(item.id,item.teacherId)" class="img">
            <div class="left">
              <img :src="item.cover" alt="Cover" class="cover-img" />
            </div>
            <div class="right">
              <div class="size">
                <span>{{ item.title }}</span>
              </div>
              <div class="tag">
                <h3>
                  {{ item.content.slice(0, 210)
                  }}{{ item.content.length > 210 ? "..." : "" }}
                </h3>
              </div>
              <div class="info">
                <el-avatar shape="circle" :size="50" :src="item.avatar" />
                <div class="author-info">
                  <h3>{{ item.author }}</h3>
                  <span>{{ item.gmtCreate }}</span>
                </div>
                <div class="info2">
                  <h3>{{ item.browse }} 浏览</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[5, 10, 15, 20]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="getpage"
            @current-change="getpage"
          />
        </el-config-provider>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import imgUrl from "../../assets/img/2.jpg";
import axios from "../../assets/js/axios";
import zhCn from "element-plus/es/locale/lang/zh-cn";

const router = useRouter();
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const background = ref(true);
const total = ref(0);
const essayList = ref<any[]>([]);
const teacherList = ref<any[]>([]);
const getpage = () => {
  axios
    .get("/serviceedu/edu-essay/getPageBatchs", {
      page: currentPage4.value,
      size: pageSize4.value,
    })
    .then((res: any) => {
      essayList.value = res.data.list;
      total.value = res.data.total;
    })
    .catch((error) => {
      console.error("Error fetching page data:", error);
    });

    axios.get("/serviceedu/edu-essay/getTeacherAvatar",{}).then((res: any)=>{
      teacherList.value=res.data.data;
      
    })
};

// 页面加载时获取初始数据
getpage();

const toarticleTodetail = (id:number,teacherId: number) => {
  axios.post(`/serviceedu/edu-essay/updateBrowse/${id}`,{})
    .then(() => {
      console.log("浏览量更新成功");
      // 跳转到课程详情页
      router.push({ path:  "/essayTodetail", query: { id: id, teacherId: teacherId } });
    })
    .catch(err => {
      console.error("更新浏览量失败", err);
    });

  // 更新前端显示的浏览量
  const essay = teacherList.value.find((essay: any) => essay.id === id);
  if (essay) {
    essay.browse += 1; // 前端手动增加浏览量
  }
  router.push({ path: "/essayTodetail", query: { teacherId } });
};
</script>

<style lang="less" scoped>
.article {
  .wrap2 {
    width: 1200px;
    margin: 0 auto;
    .articlecate {
      margin: 20px 0;
      h1{
        margin-left: -1060px;
      }
    }
    .articleList {
      margin-bottom: 10px;
      .list1 {
        display: flex;
        height: 220px;
        background-color: white;
        border: 1px solid #b1b3b8;
        margin-bottom: 10px;
        position: relative; /* 确保 .info 定位在 .list1 的底部 */
        padding-bottom: 20px; /* 保持 .info 与 .list1 底部的距离 */
        
        .img {
          display: flex;
          .cover-img {
            width: 240px;
            height: 218px;
          }
          .right {
            flex-grow: 1;
            padding: 0px;
            position: relative;
            
            .size {
              font-size: 25px;
              text-align: left;
              margin-left: 20px;
            }
            
            .tag h3 {
              margin-top: 10px;
              color: #b1b3b8;
            }
            
            .info {
              display: flex;
              align-items: center;
              font-size: 13px;
              color: #b1b3b8;
              position: absolute;
              bottom: -10px; 
              left: 20px; 
              
              .author-info {
                margin-left: 10px;
                
                h3 {
                  margin-left: -90px;
                }
              }
              
              .info2 {
                margin-left: 700px; /* 确保浏览信息在最右侧 */
              }
            }
          }
        }
      }
    }
  }
}
.page {
  margin-top: 20px;
  text-align: center;
}

</style>
